<template>
  <div class="min-h-screen bg-gray-50">
    <div class="container mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <div class="mb-8">
        <div class="flex justify-between items-center">
          <div>
            <h1 class="text-3xl font-bold text-gray-900">我的笔记</h1>
            <p class="text-gray-600">记录学习心得和解题思路</p>
          </div>
          <button
            class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
            @click="createNote"
          >
            新建笔记
          </button>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="md:col-span-2">
            <div class="relative">
              <input
                v-model="searchQuery"
                type="text"
                placeholder="搜索笔记..."
                class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                @input="handleSearch"
              />
              <svg class="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
              </svg>
            </div>
          </div>

          <div>
            <select
              v-model="selectedTag"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              @change="handleFilter"
            >
              <option value="">所有标签</option>
              <option value="algorithm">算法</option>
              <option value="data-structure">数据结构</option>
              <option value="dynamic-programming">动态规划</option>
              <option value="graph">图论</option>
              <option value="tree">树</option>
            </select>
          </div>
        </div>
      </div>

      <!-- 笔记列表 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
          v-for="note in filteredNotes"
          :key="note.id"
          class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
          @click="viewNote(note)"
        >
          <div class="p-6">
            <div class="flex items-center justify-between mb-3">
              <span
                :class="[
                  'px-2 py-1 rounded text-xs font-semibold',
                  note.tag === 'algorithm' ? 'bg-blue-100 text-blue-800' :
                  note.tag === 'data-structure' ? 'bg-green-100 text-green-800' :
                  note.tag === 'dynamic-programming' ? 'bg-purple-100 text-purple-800' :
                  note.tag === 'graph' ? 'bg-yellow-100 text-yellow-800' :
                  'bg-gray-100 text-gray-800'
                ]"
              >
                {{ getTagName(note.tag) }}
              </span>
              <span class="text-sm text-gray-500">{{ formatDate(note.updatedAt) }}</span>
            </div>
            
            <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ note.title }}</h3>
            <p class="text-gray-600 text-sm mb-4">{{ note.summary }}</p>
            
            <div class="flex items-center justify-between text-sm text-gray-500">
              <span>{{ note.questionTitle || '通用笔记' }}</span>
              <div class="flex items-center space-x-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                </svg>
                <span>{{ note.views }} 次查看</span>
              </div>
            </div>
          </div>
          
          <div class="bg-gray-50 px-6 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-4">
              <button
                class="text-blue-600 hover:text-blue-800 text-sm"
                @click.stop="editNote(note)"
              >
                编辑
              </button>
              <button
                class="text-green-600 hover:text-green-800 text-sm"
                @click.stop="shareNote(note)"
              >
                分享
              </button>
            </div>
            <button
              class="text-red-600 hover:text-red-800 text-sm"
              @click.stop="deleteNote(note)"
            >
              删除
            </button>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="filteredNotes.length === 0" class="text-center py-12">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">暂无笔记</h3>
        <p class="mt-1 text-sm text-gray-500">开始记录你的学习心得吧</p>
        <div class="mt-6">
          <button
            class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
            @click="createNote"
          >
            创建第一篇笔记
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 响应式数据
const searchQuery = ref('')
const selectedTag = ref('')

// 模拟笔记数据
const notes = ref([
  {
    id: 1,
    title: '动态规划入门',
    summary: '动态规划是一种通过把原问题分解为相对简单的子问题的方式求解复杂问题的方法...',
    content: '动态规划的核心思想是将复杂问题分解为简单的子问题...',
    tag: 'dynamic-programming',
    questionTitle: '最长递增子序列',
    views: 25,
    createdAt: new Date('2023-01-15'),
    updatedAt: new Date('2023-01-20')
  },
  {
    id: 2,
    title: '二叉树遍历总结',
    summary: '总结了二叉树的前序、中序、后序遍历的递归和非递归实现方法...',
    content: '二叉树遍历是树结构的基础操作...',
    tag: 'tree',
    questionTitle: '二叉树的中序遍历',
    views: 18,
    createdAt: new Date('2023-02-10'),
    updatedAt: new Date('2023-02-15')
  },
  {
    id: 3,
    title: '图论算法笔记',
    summary: '整理了深度优先搜索(DFS)和广度优先搜索(BFS)在图中的应用...',
    content: '图论是计算机科学中的重要分支...',
    tag: 'graph',
    questionTitle: '岛屿数量',
    views: 32,
    createdAt: new Date('2023-03-05'),
    updatedAt: new Date('2023-03-08')
  },
  {
    id: 4,
    title: '排序算法比较',
    summary: '比较了各种排序算法的时间复杂度和空间复杂度，以及适用场景...',
    content: '排序算法是算法学习的基础...',
    tag: 'algorithm',
    questionTitle: null,
    views: 15,
    createdAt: new Date('2023-04-12'),
    updatedAt: new Date('2023-04-12')
  },
  {
    id: 5,
    title: '哈希表应用',
    summary: '哈希表在解决查找、去重等问题中的应用和技巧...',
    content: '哈希表是一种重要的数据结构...',
    tag: 'data-structure',
    questionTitle: '两数之和',
    views: 22,
    createdAt: new Date('2023-05-20'),
    updatedAt: new Date('2023-05-25')
  }
])

// 计算属性
const filteredNotes = computed(() => {
  let filtered = notes.value

  // 标签过滤
  if (selectedTag.value) {
    filtered = filtered.filter(n => n.tag === selectedTag.value)
  }

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(n =>
      n.title.toLowerCase().includes(query) ||
      n.summary.toLowerCase().includes(query) ||
      (n.questionTitle && n.questionTitle.toLowerCase().includes(query))
    )
  }

  return filtered
})

// 方法
const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
}

const handleFilter = () => {
  // 过滤逻辑已在计算属性中处理
}

const getTagName = (tag: string) => {
  const tagMap: { [key: string]: string } = {
    algorithm: '算法',
    'data-structure': '数据结构',
    'dynamic-programming': '动态规划',
    graph: '图论',
    tree: '树'
  }
  return tagMap[tag] || tag
}

const formatDate = (date: Date) => {
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

const createNote = () => {
  console.log('创建笔记')
  // 这里可以跳转到创建笔记页面
}

const viewNote = (note: any) => {
  console.log('查看笔记:', note)
  // 这里可以跳转到笔记详情页面
}

const editNote = (note: any) => {
  console.log('编辑笔记:', note)
  // 这里可以跳转到编辑笔记页面
}

const shareNote = (note: any) => {
  console.log('分享笔记:', note)
  // 这里可以实现分享功能
}

const deleteNote = (note: any) => {
  if (confirm(`确定要删除笔记 "${note.title}" 吗？`)) {
    const index = notes.value.findIndex(n => n.id === note.id)
    if (index > -1) {
      notes.value.splice(index, 1)
    }
    console.log('删除笔记:', note)
  }
}

onMounted(async () => {
  const userId = route.params.id
  try {
    // 这里加载笔记数据
    console.log('加载笔记数据:', userId)
  } catch (error) {
    console.error('加载笔记数据失败:', error)
  }
})
</script>
